import React, {Component} from 'react';
import FontIcon from 'material-ui/FontIcon';
import AppBar from 'material-ui/AppBar';
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
import AutoComplete from 'material-ui/AutoComplete';
import TextField from 'material-ui/TextField';

import { browserHistory } from 'react-router';

import {BottomNavigation, BottomNavigationItem} from 'material-ui/BottomNavigation';
import Paper from 'material-ui/Paper';
import IconLocationOn from 'material-ui/svg-icons/action/settings';
import IconContacts from 'material-ui/svg-icons/action/account-balance';
import IconRestore from 'material-ui/svg-icons/action/restore';
import ActionHome from 'material-ui/svg-icons/action/search';
import IconButton from 'material-ui/IconButton';


import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

import Tab1 from './Tab1.jsx';
import Tab2 from './Tab2.jsx';
import Tab4 from './Tab4.jsx';
import Tab3 from './Tab3.jsx';
import Tab2Detail from './Tab2Detail.jsx';
import Tab5 from './Tab5.jsx';


const recentsIcon = <IconRestore/>;
const favoritesIcon = <IconContacts/>;
const nearbyIcon = <IconLocationOn />;

const styles = {
  toolbar:{
    position: 'fixed',
    top: 0,
    width: '100%',
  },
  footer:{
    position: 'fixed',
    bottom: 0,
    width: '100%',
  },
}

const title_tabs=['最近交易','账号','项目','设置','区块'];
/**
 * A simple example of `BottomNavigation`, with three labels and icons
 * provided. The selected `BottomNavigationItem` is determined by application
 * state (for instance, by the URL).
 */
export default class App extends Component {
  constructor(props) {
    super(props);
    let tab = props.params.tab?props.params.tab:'tab0';
    let tab_pos = tab.substring(3); 
    this.state = {
      selectedIndex: parseInt(tab_pos),
      searchIptWidth:0,
      searchText:'',
    };

    this.select = (index) => {
      if(index==3)
        browserHistory.push('/tab2/'+Session.get("currentUser").userId);
      else
        browserHistory.push('/tab'+index);
      this.setState({selectedIndex: index})
    };
  }
  
  getChildContext() {
     return { muiTheme: getMuiTheme(baseTheme) };
  }

  renderSearch(){
    switch(this.state.selectedIndex){
      case 0:
      case 1:
      case 2:
        return(     
  <Menu disableAutoFocus={true} 
    style={{width:this.state.searchIptWidth}}
  >
    <MenuItem leftIcon={<ActionHome/>} disabled={false} 
      onTouchTap={(e )=> {
          //点击按钮,加宽输入框
          if(this.state.searchIptWidth==0)
            this.setState({ searchIptWidth: 500 });
          else
            this.setState({ searchIptWidth: 0, searchText:''});
        }}
      innerDivStyle={{paddingLeft:40}}>
      <TextField hintText='搜索'
        style={{width:this.state.searchIptWidth}}
        value={this.state.searchText}
        onChange={(e,newVal )=> {
          this.setState({ searchText: newVal });
          //console.log('onChange:'+newVal);
        }}
      />
    </MenuItem>
        </Menu> );

      case 3:
        return '';
    }    
  }
  renderTab(){
    //console.log('renderTab');
    switch(this.state.selectedIndex){
      case 0:
        return <Tab1 searchText={this.state.searchText}/>
      case 1:
        return <Tab2 searchText={this.state.searchText}/>
      case 2:
        return <Tab3 searchText={this.state.searchText}/>
      case 3:
      //如果存在url指定参数,显示该账户
        return <Tab2Detail
              uid={this.props.params.uid?this.props.params.uid: Session.get("currentUser").userId}
              />
      case 4:
        return <Tab5 />
    }
  }

  render() {
    return (
<div id="container" className="container">      
  <AppBar
    style={styles.toolbar}
    title={title_tabs[this.state.selectedIndex]}
    titleStyle={{overflow:'visible'}}
  >
  {this.renderSearch()}
  </AppBar>

  {this.renderTab()}

      <Paper zDepth={1} style={styles.footer}>
        <BottomNavigation selectedIndex={this.state.selectedIndex}>
          <BottomNavigationItem
            label="交易"
            icon={recentsIcon}
            onTouchTap={() => this.select(0)}
          />
          <BottomNavigationItem
            label="账号"
            icon={favoritesIcon}
            onTouchTap={() => this.select(1)}
          />
         
           <BottomNavigationItem
            label="项目"
            icon={favoritesIcon}
            onTouchTap={() => this.select(2)}
          />

          <BottomNavigationItem
            label="设置"
            icon={nearbyIcon}
            onTouchTap={() => this.select(3)}
          />

          <BottomNavigationItem
            label="区块"
            icon={nearbyIcon}
            onTouchTap={() => this.select(4)}
          />
        </BottomNavigation>
      </Paper>
</div>
    );
  }
}

App.childContextTypes = {
   muiTheme: React.PropTypes.object.isRequired,
};